<template>
  <view class="container">
    <FilterNavbar :searchList="searchList" v-model:queryParam="queryParam" @confirm="onFilterNavbarConfirm">
      <template #center>
        <view class="navbar-title"> 反写价格结果查询 </view>
      </template>
    </FilterNavbar>
    <view class="page-filter">
      <ve-tabs :actived="0" :list="tabs" @change="tabsChange"></ve-tabs>
    </view>

    <scroll-view
      scroll-y
      :scroll-top="scrollTop"
      :scroll-with-animation="true"
      refresher-enabled
      :refresher-triggered="refreshStatus"
      :enable-back-to-top="true"
      @refresherrefresh="resetRefresh(true)"
      @scrolltolower="reachBottom"
    >
      <view class="record-list">
        <block v-for="item in dataSource" :key="item">
          <RecordItem :record="item" @resetRefresh="reSyncSuccess" />
        </block>
      </view>
      <!-- 加载结束列表为空时展示 -->
      <ve-empty v-if="dataSource.length == 0 && loadStatus == 'nomore'"></ve-empty>
      <!-- 底部加载状态 -->
      <ve-load-more v-else :status="loadStatus" bgColor="#F7F7F9"></ve-load-more>
      <!-- loading组件 -->
      <ve-toast ref="toastRef" />
    </scroll-view>
  </view>
</template>

<script setup>
  import { computed, ref } from 'vue'
  import FilterNavbar from '@/components/FilterNavbar'
  import useList from '@/hooks/useList'
  import { onLoad } from '@dcloudio/uni-app'
  import { usePageDict } from '@/hooks/useDict'
  import { getChannelSyncPriceStatic } from '@/api/business/channelSyncPrice'
  import RecordItem from './components/record-item.vue'

  const toastRef = ref()

  const queryParam = ref({
    modelIdList: undefined,
    siteIdList: undefined,
    templateIdList: undefined,
    sourceIdList: undefined,
    operatorNameLike: undefined,
    createTimeStart: undefined,
    createTimeEnd: undefined,
    finishTimeStart: undefined,
    finishTimeEnd: undefined,
  })

  const { resetRefresh, reachBottom, loadData, scrollTop, loadStatus, refreshStatus, dataSource } = useList(
    '/V5/channelSyncPrice/pageList',
    queryParam,
  )

  const dict = usePageDict('channelSyncPrice')
  const searchList = computed(() => {
    return [
      {
        prop: 'modelIdList',
        label: '车型',
        type: 'remote-select',
        attrs: {
          multiple: true,
          type: 'multiple_carModel',
        },
      },
      {
        prop: 'siteIdList',
        label: '应用门店',
        type: 'remote-select',
        attrs: {
          multiple: true,
          type: 'site_lease_list',
          params: {
            siteType: 40,
          },
        },
        config: {
          listPage: {
            title: '选择应用门店',
          },
        },
      },
      {
        prop: 'templateIdList',
        label: '车型价格模板名称',
        type: 'remote-select',
        attrs: {
          multiple: true,
          type: 'tenantPriceTemplate',
        },
      },
      {
        prop: 'sourceIdList',
        label: '反写对象',
        type: 'remote-select',
        config: {
          listPage: {
            title: '选择反写对象',
          },
        },
        attrs: {
          multiple: true,
          outData: dict.thirdpartySourceEnum,
          type: 'dict',
        },
      },
      {
        prop: 'operatorNameLike',
        label: '操作人',
        type: 'input',
      },
      {
        prop: ['createTimeStart', 'createTimeEnd'],
        label: '发起反写时间',
        type: 'daterange-picker',
      },
      {
        prop: ['finishTimeStart', 'finishTimeEnd'],
        label: '完成反写时间',
        type: 'daterange-picker',
      },
    ]
  })

  // 筛选确认
  const onFilterNavbarConfirm = (params) => {
    queryParam.value = {
      ...queryParam.value,
      ...params,
    }
    resetRefresh()
    getStatusCount()
  }

  // 统计
  const tabs = ref([
    { label: '全部', num: 0, value: null },
    { label: '反写中', num: 0, value: 0 },
    { label: '部分失败', num: 0, value: 2 },
    { label: '反写失败', num: 0, value: -1 },
    { label: '反写成功', num: 0, value: 1 },
  ])
  const getStatusCount = () => {
    const param = {
      ...queryParam.value,
      statusList: undefined,
    }
    getChannelSyncPriceStatic(param).then((res) => {
      const { result } = res
      tabs.value[1].num = result.doing
      tabs.value[2].num = result.partFail
      tabs.value[3].num = result.fail
      tabs.value[4].num = result.success
    })
  }

  // tab切换
  const tabsChange = (e, record) => {
    const val = record.value
    queryParam.value.statusList = val || val == 0 ? [val] : undefined
    loadData(1)
  }

  // 重新反写成功
  const reSyncSuccess = () => {
    resetRefresh()
    getStatusCount()
  }

  onLoad(() => {
    getStatusCount()
    loadData(1)
  })
</script>

<style lang="less" scoped>
  .container {
    height: 100vh;
    background-color: rgba(247, 248, 250, 1);
  }
  .navbar-title {
    font-size: 34rpx;
    font-weight: 500;
    color: #1d2129;
  }
  .record-list {
    padding: 24rpx 24rpx;
  }
</style>
